<template>
  <div id="app">
    <template v-if="$route.path !== '/login'">
      <el-header class="main-header">
        <div class="main-container nav-flex">
          <div class="nav-left">
            <el-menu
              :default-active="$route.path"
              mode="horizontal"
              router
              background-color="#fff"
              text-color="#333"
              active-text-color="#409EFF"
              class="nav-menu"
              :ellipsis="false"
            >
              <el-menu-item index="/">
                首页
              </el-menu-item>
              <el-menu-item index="/orders">
                订单管理
              </el-menu-item>
              <el-menu-item index="/shops">
                商家管理
              </el-menu-item>
              <el-menu-item index="/profile">
                个人中心
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-header>
      <el-button
        type="text"
        class="logout-btn-abs"
        @click="logout"
      >
        退出登录
      </el-button>
    </template>
    <el-main class="main-container">
      <router-view />
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const logout = () => {
  localStorage.removeItem('isLogin')
  router.replace('/login')
}
</script>

<style>
#app {
  min-height: 100vh;
  background: #f6f8fa;
}
.main-header {
  background: #fff;
  box-shadow: 0 2px 8px #f0f1f2;
  width: 100vw;
  left: 0;
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
  z-index: 10;
  padding: 0;
}
.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}
.nav-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-left {
  flex: 1;
  min-width: 0;
}
.nav-menu {
  border-bottom: none;
  font-size: 18px;
  background: transparent;
  height: 64px;
  line-height: 64px;
}
.el-menu--horizontal > .el-menu-item {
  padding: 0 32px;
  font-size: 18px;
  height: 64px;
  line-height: 64px;
}
.logout-btn-abs {
  position: fixed;
  top: 18px;
  right: 32px;
  color: #f56c6c;
  font-size: 16px;
  font-weight: 500;
  z-index: 1001;
  background: #fff;
  box-shadow: 0 2px 8px #f0f1f2;
  border-radius: 6px;
  padding: 6px 18px;
}
.el-main.main-container {
  background: none;
  min-height: 600px;
}
</style>
